<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<style>
    /* css 标签选择器*/
    div{
        position: absolute;/*绝对定位*/
        left: 42%;/*距离游览器左边*/
        top: 36%;/*距离游览器上边*/
        width: 243px;/* 宽度*/
        height: 173px;/* 高度*/
        border: 1px solid darkgreen;/*边框*/
        border-radius: 10px; /* 圆角*/
        background:  rgba(136,203,31,0.3);    /*a/ *背景颜色 */
        text-align: center; /*文本居中 */
    }
    .btn{
        margin-top: 8px; /*上的外边框*/
        width: 40px;
        height: 25px;
        font-size: 10px;
        background: lightpink;
        border-radius: 5px;

    }
</style>
<body style="background-image: url('./images/5.jpg')">
<div>
    <h2>XXX系统登录</h2><!--快捷换行 shift +回车 -->
    账号：<input type="text" name="username" palceholder="请输入账号"><br><!-- 复制 Ctrl+d -->
    密码：<input type="password" name="password" palceholder="请输入密码"><br>
    <input type="button" id="btn" class="btn" value="登录">
    <a href="/Test/buyerlogout" class="dropdown-toggle">
        <input type="button" id="btn2" calss="btn" value="退出">
    </a>

</div>
</body>
<script>
   /* document.getElementById("btn").onclick = function()
    {
      //1 获取输入框的值
        var username=document.getElementsByName("uername");
        var password=document.getElementsByName("password");

        if(!username[0].value)
        {
            alert("账号不为空");
            return;
        }
        if(!password[0].value)
        {
            alert("密码不为空");
            return;
        }

        // 2 admin 123 登录成功
        if( username[0].value == "admin" && password[0].value == "123")
        {
            alert("登录成功");
            location.href="index.jsp";
        }
        else
        {
            alert("登录失败");
        }

    }*/
    document.getElementById("btn2").onclick = function()
    {
        location.href="home.jsp";

    }
</script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    //css

    //
    $("#btn").on("click",function() {

       var username= $("input[name=username]").val();
        var password= $("input[name=password]").val();

        if(!username){
            alert("账号不能为空2");
            return;
        }

        if(!password){
            alert("密码不能为空2");
            return;
        }

        $.ajax
        (
            {
                url: "/Test/login",//请求路径
                data: {username:username,password:password},//请求数据
                type: "POST",//请求方式 GET/POST/ PUT/DELETE
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {
                       alert("登录成功")
                       location.href="user.jsp";
                    } else {
                        alert(data.msg);
                    }
                }
            }
        )
    })
</script>
</html>